<template>
    <div>
       <!-- 下拉刷新组件 -->
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放即可刷新">
        <!-- 上拉加载更多 -->
         <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
       <!-- 九宫格组件 -->
        <van-grid :column-num="2" :gutter="10">
          <van-grid-item v-for="(item, index) in goodslist" :key="index" @click="getgoodsdetail(item.id)">
            <van-image  width="80%" height="80%" fit="contain" :src="item.img_url" />
            <p class="goods_title">{{item.title}}</p>
            <div class="bottom_box">
              <div class="top">
                <span>￥{{item.sell_price}}</span>
                <s>￥{{item.market_price}}</s>
              </div>
              <div class="bottom">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
        </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  created() {
    this.$store.dispatch('getGoodslist',1)
  },
  methods: {
    //点击grid获取商品ID，并跳转页面
    getgoodsdetail (id) {
      this.$router.push('/goods/detail/'+id)
    },
    //下拉列表刷新
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.$store.dispatch('getGoodslist',1);
      }, 1000)
    },
   // 上拉加载更多
    onLoad() {
        if (this.loading) {
          this.$store.dispatch('getGoodslist',2)
        }
        console.log('1231')
        this.loading = false;
        
    },
    ...mapMutations(['initGoodlist']),
  },
  computed:{
    ...mapState(['goodslist']),
}
}
</script>
<style scoped lang="less">
.goods_title {
  display: block;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 0.4rem 0.5rem;
  width: 100%;
  height: 57px;
  font-size: 0.5rem;
}
.bottom_box {
  width: 100%;
  background-color: #eeeeee;
  box-sizing: border-box;
  padding: 5px;
  .top {
    span {
      display: inline-block;
      font-size: 0.5rem;
      color: red;
      margin-right: 10px;
    }
    s {
      font-size: 0.3rem;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 0.5rem;
    }
  }
}
.grid-item {
  border: 1px solid #ccc;
}
</style>
